<template>
    <div class="event">
      <!-- 搜索 -->
      <elSearch
      :Elsearch="Elsearch"
      :searchBtn="searchBtn"
      @searchBtn="searchBtn"
      ></elSearch>
      <!-- 表格 -->
      <tableList
      :borderList="borderList"
      :tableData="tableData"
      :elFormItemList="elFormItemList"
      ></tableList>
      <!-- 分页 -->
      <elPageList
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :ElPageList="ElPageList"
      ></elPageList>
      <!-- 弹窗 -->
      <elDialogImg ref="elDiaLog"></elDialogImg>
    </div>
</template>

<script>
import tableList from './tableList.vue'
import elDialogImg from './components/elDialogImg.vue'
import { borderList, borderListDelete } from '@/api/borderList.js'
export default {
  name: 'List',
  components: {
    tableList,
    elDialogImg
  },
  data () {
    return {
      // 搜索框
      Elsearch: [
        {
          id: 1,
          type: 'input',
          placeholder: '请输入商品ID',
          class: 'w-[160px] pr-[10px]',
          size: 'mini',
          value: null,
          name: 'goodsId'
        },
        {
          id: 2,
          type: 'input',
          placeholder: '请输入商品编号',
          class: 'w-[160px] pr-[10px]',
          size: 'mini',
          value: null,
          name: 'goodsSn'
        },
        {
          id: 3,
          type: 'input',
          placeholder: '请输入商品名称',
          class: 'w-[160px] pr-[10px]',
          size: 'mini',
          value: null,
          name: 'name'
        }
      ],
      // 搜索按钮
      searchBtn: [
        {
          id: 1,
          type: 'primary',
          icon: 'el-icon-search',
          name: '查找',
          size: 'mini',
          handler: this.SearchBtn
        },
        {
          id: 2,
          type: 'primary',
          icon: 'el-icon-edit-outline',
          name: '添加',
          size: 'mini',
          handler: this.addBtn
        },
        {
          id: 3,
          type: 'primary',
          icon: 'el-icon-download',
          name: '导出',
          size: 'mini',
          handler: this.addExport
        }
      ],
      // 表格数据
      borderList: [
        {
          id: 1,
          prop: 'goodsSn',
          label: '商品ID',
          width: 100
        },
        {
          id: 2,
          prop: 'name',
          label: '名称',
          width: 200
        },
        {
          id: 3,
          prop: 'picUrl',
          label: '图片',
          type: 'picUrl',
          width: 100
        },
        {
          id: 4,
          prop: 'shareUrl',
          width: 100,
          label: '分享图',
          type: 'shareUrl'
        },
        {
          id: 5,
          prop: '',
          label: '详情',
          type: 'button',
          width: 100,
          btn: [
            {
              id: 1,
              name: '详情',
              handler: this.tableDetails
            }
          ]
        },
        {
          id: 6,
          prop: 'counterPrice',
          label: '市场售价',
          width: 100
        },
        {
          id: 7,
          prop: 'retailPrice',
          width: 100,
          label: '当前价格'
        },
        {
          id: 8,
          prop: 'isNew',
          label: '是否新品',
          type: 'Tag',
          width: 80,
          filter: (row) => {
            return row.isNew ? ['新品', 'success'] : ['非新品', '']
          }
        },
        {
          id: 9,
          prop: 'isHot',
          label: '是否热品',
          type: 'Tag',
          width: 80,
          filter: (row) => {
            return row.isHot ? ['热品', 'success'] : ['非热品', '']
          }
        },
        {
          id: 10,
          prop: 'isOnSale',
          label: '是否在售',
          type: 'Tag',
          width: 80,
          filter: (row) => {
            return row.isOnSale ? ['在售', 'success'] : ['非在售', '']
          }
        },
        {
          id: 11,
          label: '操作',
          type: 'button',
          btn: [
            {
              id: 1,
              name: '编辑',
              handler: this.tableEdit
            },
            {
              id: 2,
              name: '删除',
              type: 'danger',
              handler: this.tableElete
            }
          ]
        }
      ],
      // 表格详情
      elFormItemList: [
        {
          id: 1,
          name: '商品编号',
          prop: 'goodsSn'
        },
        {
          id: 2,
          name: '宣传画廊',
          prop: 'detail',
          type: 'detail'
        },
        {
          id: 3,
          name: '商品介绍',
          prop: 'brief'
        },
        {
          id: 4,
          name: '商品单位',
          prop: 'unit'
        },
        {
          id: 5,
          name: '关键字',
          prop: 'keywords'
        },
        {
          id: 6,
          name: '类目ID',
          prop: 'categoryId'
        },
        {
          id: 7,
          name: '品牌商ID',
          prop: 'brandId'
        }
      ],
      // 分页
      pages: {
        page: 1,
        limit: 10
      },
      // 分页框架
      ElPageList: {
        pageSizes: [10, 20, 30, 40],
        pageSize: 100,
        layout: 'total, sizes, prev, pager, next, jumper',
        currentPage: 1
      },
      // 表格数据
      tableData: []
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    // 表格数据
    this.getBorderList()
  },
  methods: {
    // 表格数据
    getBorderList () {
      const params = {
        page: this.pages.page,
        limit: this.pages.limit,
        sort: 'add_time',
        order: 'desc'
      }
      borderList(params).then(res => {
        const { data: { list } } = res
        this.tableData = list
        // console.log(this.tableData)
      })
    },
    // 搜索按钮
    SearchBtn () {
      const ElsearchList = this.Elsearch.map(item => ({ [item.name]: item.value }))
      const ElsearchLists = Object.assign({}, ...ElsearchList)
      this.$emit('search', ElsearchLists)
      const params = {
        page: this.pages.page,
        limit: this.pages.limit,
        sort: 'add_time',
        order: 'desc'
      }
      borderList({ ...params, ...ElsearchLists }).then(res => {
        const { data: { list } } = res
        this.tableData = list
        // console.log(this.tableData)
      })
    },
    // 添加按钮
    addBtn () {
      this.$router.push('/commodity/grounding')
    },
    // 导出按钮
    addExport (row) {
      // console.log(row)
    },
    // 编辑
    tableEdit (event, scope, btn) {
      this.$router.push(`/commodity/grounding?id=${scope.row.id}`)
      // console.log(scope.row.id)
    },
    // 删除
    async tableElete (event, scope, btn) {
      await borderListDelete(scope.row)
      this.getBorderList()
    },
    // 详情
    tableDetails (event, scope, btn) {
      this.$refs.elDiaLog.isShow()
      this.$refs.elDiaLog.handleClose(scope.row.detail)
    },
    // 条数
    handleSizeChange (val) {
      this.pages.limit = val
      this.getBorderList()
    },
    // 页数
    handleCurrentChange (val) {
      this.pages.page = val
      this.getBorderList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
